<template>
  <!-- 下拉菜单组件，根据设备状态禁用或启用 -->
  <el-dropdown :disabled="loading || floating" @command="handleCommand">
    <!-- 插槽，传递 loading 和 handleTrigger 方法给父组件 -->
    <slot :loading :trigger="handleTrigger" />

    <!-- 下拉菜单内容 -->
    <template #dropdown>
      <el-dropdown-menu>
        <!-- 遍历选项，生成下拉菜单项 -->
        <el-dropdown-item
          v-for="item of options"
          :key="item.value"
          :command="item.value"
        >
          {{ $t(item.label) }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
// 导入 sleep 函数，用于在执行命令时添加延迟
import { sleep } from '$/utils'

export default {
  props: {
    // 设备对象，用于执行相关命令
    device: {
      type: Object,
      default: () => ({}),
    },
    // 标记是否处于浮动状态，影响菜单启用状态
    floating: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 加载状态，影响菜单启用状态
      loading: false,
      // 命令映射，将旋转选项映射到实际的设备控制命令
      commandMap: {
        // <!-- 定义屏幕方向相关的ADB命令 -->
        adbCommands: {
          /*
          设置屏幕垂直方向
          使用内容提供者接口插入或更新系统设置
          name:s:user_rotation 表示设置名称为"user_rotation"
          value:i:0 表示将屏幕旋转角度设置为0度
          */
          vertically:
            'content insert --uri content://settings/system --bind name:s:user_rotation --bind value:i:0',

          /*
          设置屏幕水平方向
          name:s:user_rotation 表示设置名称为"user_rotation"
          value:i:1 表示将屏幕旋转角度设置为90度
          */
          horizontally:
            'content insert --uri content://settings/system --bind name:s:user_rotation --bind value:i:1',

          /*
          启用自动旋转屏幕功能
          name:s:accelerometer_rotation 表示设置名称为"accelerometer_rotation"
          value:i:1 表示启用根据重力感应自动旋转屏幕的功能
          */
          auto:
            'content insert --uri content://settings/system --bind name:s:accelerometer_rotation --bind value:i:1',

          /*
          禁用自动旋转屏幕功能
          name:s:accelerometer_rotation 表示设置名称为"accelerometer_rotation"
          value:i:0 表示禁用根据重力感应自动旋转屏幕的功能
          */
          disable:
            'content insert --uri content://settings/system --bind name:s:accelerometer_rotation --bind value:i:0',
        }
      },
    }
  },
  computed: {
    // 计算属性，生成旋转选项数组
    options() {
      const value = [
        // 定义旋转控制选项数组
        [
          // 垂直旋转选项
          {
            label: this.$t('device.control.rotation.vertically'),
            value: 'vertically',
          },
          // 水平旋转选项
          {
            label: this.$t('device.control.rotation.horizontally'),
            value: 'horizontally',
          },
          // 自动旋转选项
          {
            label: this.$t('device.control.rotation.auto'),
            value: 'auto',
          },
          // 禁用旋转选项
          {
            label: this.$t('device.control.rotation.disable'),
            value: 'disable',
          },
        ]
      ]
      return value
    },
  },
  methods: {
    // 触发旋转菜单的方法
    handleTrigger() {
      // 如果不处于浮动状态，直接返回 false
      if (!this.floating) {
        return false
      }

      // 监听执行设备旋转命令的结果
      window.electron.ipcRenderer.once(
        'execute-device-rotation-shell',
        (event, data) => {
          // 处理旋转命令执行结果
          this.handleCommand(data)
        },
      )

      // 发送打开设备旋转菜单的请求，包含所有选项
      const options = toRaw(this.options)
      window.electron.ipcRenderer.send('open-device-rotation-menu', {
        options,
      })
    },

    // 处理旋转命令的方法
    async handleCommand(value) {
      // 设置加载状态为 true
      this.loading = true

      // 根据旋转选项获取对应的命令
      const command = this.commandMap[value]

      // 如果是垂直或水平旋转，先执行禁用当前旋转命令，再等待 500 毫秒
      if (value === 'vertically' || value === 'horizontally') {
        await this.$adb.deviceShell(this.device.id, this.commandMap.disable)
        await sleep(500)
      }

      // 执行实际的旋转命令
      this.$adb.deviceShell(this.device.id, command)

      // 重置加载状态为 false
      this.loading = false
    },
  },
}
</script>

<style></style>
